<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>看字读字速度</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        .app{
            position:absolute;left:10px;top:80px; width:300px; height:80px;
            border:1px solid;border-radius:25px;
            background-color:#555555;
        }
        .record-btn{
            position:absolute;left:120px;top:55px
        }
    </style>
</head>
<body>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/TimeFactory.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script>
        var moonjs = new MoonJs();
        moonjs.init(moonjs.createCanvas({c:'#fff',w:window.innerWidth-10,h:window.innerHeight-10}));
        moonjs.start();
        var score=0;
        var [cx,cy,xnum,ynum]=[50,50,8,8];
        var rects=[];
        for(let i=0;i<xnum;i++){
            for(let j=0;j<ynum;j++){
                let x=cx+j*55;
                let y=cy+i*55;
                let rect=moonjs.createDisplay('rect').setXY(x, y).setColor('#ffffff').setWH(50,50)
                moonjs.click(rect,onClick,1);
                rects.push(rect);
            }
        }
        function next(){
            let r=Math.floor(Math.random()*rects.length);
            let c1=ColorManager.randomColor();
            let c2=ColorManager.changeColorLight(c1,-0.1);
            for(let i=0;i<rects.length;i++){
                let rect=rects[i];
                if(i==r){
                    rect.setColor(c1);
                    rect.name=1;
                }else{
                    rect.setColor(c2);
                    rect.name=0;
                }
            }
        }
        function onClick(rect){
            if(rect.name==1){
                score++;
                Unify.Alert(`恭喜你，选对了！${score}分`,1);
                setTimeout(next,1000);
            }else{
               alert(`选错了，最后得${score}分，点确定重新开始`)
               window.location.reload();
            }
        }
        next();
    </script>
</body>

</html>